<template>
  <div>
    <div class="row mb-1">
      <div class="col">
        <el-input placeholder="请输入内容" @change="start" v-model.lazy="like">
        </el-input>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col">
        <el-button @click="start" type="primary">
          查询
        </el-button>
      </div>
    </div>

    <div class="row mb-1">
      <div class="col">
        <el-table :data="tableData" border height="65vh" style="width: 100%" @sort-change="sortchange"
          @selection-change="handleChange" :highlight-current-row="!!userhandleCurrentChange"
          @current-change="userCurrentChange">
          <el-table-column v-for="v in tableattr" :key="v.label" v-bind="{ ...v }"></el-table-column>
          <el-table-column label="操作" width="230">
            <template #default="scope">
              <router-link :to="{ name: '课程组', params: { ID: scope.row.ID } }" v-slot="{ navigate }" custom>
                <el-button @click="navigate" type="info">
                  查看
                </el-button>
              </router-link>

            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="row mb-1">
      <div class="col">
        <el-pagination :hide-on-single-page="true" @current-change="handleCurrentChange" :page-size="Number(limit)"
          layout="prev, pager, next" :total="count"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import {
  computed,
  onMounted,
  reactive,
  ref,
  watch,
} from "vue";
import { useStore } from "vuex";
import { Iobj, asyncmiaoadminselectcatebag } from "../../../api";
import { Storekey, TtableU } from "../../../interface";
import Alymodel from "../../../mysql_interface/model";
import { toLocaleDateString } from "../../../util/time";
import { Team } from "../data";

type KIuser = keyof Alymodel.IMcatebag;

const p = defineProps<{ tablekey?: Array<keyof Alymodel.IMcatebag>, handleSelectionChange?: (n: Alymodel.IMcatebag[]) => void, selectarr?: number[], userhandleCurrentChange?: (n: Alymodel.IMcatebag) => void }>()






const _tableattr: TtableU<Alymodel.IMcatebag>[] = [
  {
    label: "id",
    prop: "ID",
    sortable: true,
  },
  {
    label: "名称",
    prop: "name",
    sortable: true,
  },
  {
    label: "排序",
    prop: 'paixu',
    sortable: true,
  },
  {
    prop: "createtime",
    label: "创建时间",
    formatter: ({ createtime }) => formatter(createtime),
    sortable: true,
  },
];

const tableattr = computed(() => {
  const tablekey = p.tablekey;
  if (!tablekey) return _tableattr;
  return _tableattr.filter(({ prop }) => {
    if (prop) {
      return tablekey.includes(prop);
    }
  });
});

const dialogVisible = ref(false);
const activeName = ref("详情");
const sortable = ref<"DESC" | "ASC">("DESC");
const IID = ref<number | undefined | boolean>();
const limit = ref(20);
const offset = ref(0);
const order = ref<KIuser>("ID");
const like = ref("");
const title = ref("添加");
const ID = ref<number>();
const context = ref("context");
const ruleForm = reactive<Alymodel.IMcatebag>(Team);
const rules = reactive({});
const isquestionbank = ref(true);
const changeradio = ref("6");
const store = useStore(Storekey);
const packegekey = computed(() => {
  return store.state.packegekey?.rows;
});
const tableData = ref<Alymodel.IMcatebag[]>([])

const Tteam = computed(() => {
  if (IID.value) {
    return tableData.value.find((v) => v.ID == IID.value);
  }
  return {};
});

const count = ref(0)

function create() {
  IID.value = undefined;
}

onMounted(() => {
  store.dispatch("actionpackegekey");
  start();
});

async function start() {
  try {
    let obj: Iobj<Alymodel.IMcatebag> = {
      _limit: limit.value,
      _offset: offset.value,
      _order: order.value,
      _sortable: sortable.value,
    };
    if (like.value) {
      obj._like = ["name", like.value];
    }
    const data = await asyncmiaoadminselectcatebag(obj)
    tableData.value = data.rows
    count.value = data.count
  } catch (e: any) {
    ElMessage.error(e);
  }
}

async function closed() {
  await start();
  IID.value = !IID.value;
}

function handleCurrentChange(val: number) {
  offset.value = limit.value * (val - 1);
}

function sortchange(row: { prop: keyof Alymodel.IMcatebag; order: string }) {
  const { prop } = row;
  if (row.order == "descending") {
    sortable.value = "DESC";
  } else {
    sortable.value = "ASC";
  }
  order.value = prop;
}
function formatter(updatedAt?: string | number | Date) {
  return toLocaleDateString(updatedAt);
}

function handleChange(data: Alymodel.IMcatebag[]) {
  if (p.handleSelectionChange) p.handleSelectionChange(data);
}

function userCurrentChange(data: Alymodel.IMcatebag) {
  if (p.userhandleCurrentChange) p.userhandleCurrentChange(data);
}

watch(() => [limit.value, offset.value, order.value, sortable.value], () => {
  start()
})

watch(() => like.value, () => {
  limit.value = 20;
  offset.value = 0;
})
</script>